<script setup>
import { onMounted, ref } from 'vue';

import { collectionDataList } from '#/api/eventMon';
import juxing from '#/assets/images/juxing.png';

import Slot from './Slot.vue';

const dataList = ref();
onMounted(async () => {
  const res = await collectionDataList({
    pageNum: 1,
    pageSize: 10,
  });
  dataList.value = res.records;
});
const selectValue = ref('0');
</script>
<template>
  <!-- 父组件使用 -->
  <div class="wrap">
    <Slot>
      <!-- 具名插槽内容 -->
      <template #header>
        <span>热点事件</span>
      </template>
      <template #com>
        <a-select v-model:value="selectValue" style="width: 120px">
          <a-select-option value="0">全部</a-select-option>
          <a-select-option value="1">Lucy</a-select-option>
          <a-select-option value="2">Lucy</a-select-option>
        </a-select>
      </template>
      <!-- 作用域插槽内容 -->
      <template #content>
        <div class="wrapBox">
          <div class="itemWrap" v-for="(item, key) in dataList" :key="key">
            <img :src="juxing" class="dot-icon" alt="dot-icon" />
            <span class="title">{{ item.title }}</span>
            <div class="line"></div>
            <span class="date">{{ item.time }}</span>
          </div>
        </div>
      </template>
    </Slot>
  </div>
</template>
<style type="stylus" scoped>
/* 适用于Webkit内核浏览器(Chrome/Safari/Edge等) */

.wrap {
  width: 100%;
  .wrapBox {
    padding-right: 10px; /* 右侧留出间距 */
    max-height: 400px;
    overflow-y: scroll;
  }
  .wrapBox::-webkit-scrollbar {
    width: 8px;
    height: 12px;
  }

  .wrapBox::-webkit-scrollbar-track {
    background: #0a1015;
    border-radius: 10px;
  }

  .wrapBox::-webkit-scrollbar-thumb {
    background: #0f212e;
    border-radius: 10px;
    border: none;
  }

  .wrapBox::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  .itemWrap {
    height: 40px;
    line-height: 40px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    .dot-icon {
      width: 6px;
      height: 6px;
      margin-right: 10px;
      object-fit: contain;
    }

    span {
      margin-left: 15px;
      font-size: 14px;
      color: rgba(189, 202, 224, 1);
      max-width: 370px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 20px;
    }
  }
}
</style>
